<template>
	<view class="container">
		<!-- 顶部状态栏占位 -->
		<view class="status-bar"></view>

		<!-- 标题栏 -->
		<view class="header">
			<!-- 返回按钮 -->
			<text @tap="goBack" class="iconfont icon-fanhui"></text>
			
			<!-- 页面标题 -->
			<text class="title-text">文章详情</text>
			
			<view class="header-icons">
				<text @tap="handleShare" class="iconfont icon-fenxiang"></text>
			</view>
		</view>

		<!-- 文章内容区 -->
		<scroll-view class="article-scroll" scroll-y="true" show-scrollbar="false" enable-back-to-top="true">
			<!-- 文章标题区 -->
			<view class="article-header">
				<text class="article-title">{{ article.title }}</text>
				<view class="article-meta">
					<view class="meta-left">
						<image :src="article.authorAvatar" class="author-avatar"></image>
						<text class="author-name">{{ article.author }}</text>
					</view>
					<view class="meta-right">
						<text class="article-date">{{ article.date }}</text>
					</view>
				</view>
				<view class="article-tag" v-if="article.tag">{{ article.tag }}</view>
			</view>
			
			<!-- 封面图 -->
			<view class="cover-image-container" v-if="article.coverImage">
				<image :src="article.coverImage" mode="widthFix" class="cover-image"></image>
				<view class="image-caption" v-if="article.coverCaption">{{ article.coverCaption }}</view>
			</view>
			
			<!-- 文章正文 -->
			<view class="article-content">
				<rich-text :nodes="article.content"></rich-text>
			</view>
			
			<!-- 文章底部 -->
			<view class="article-footer">
				<view class="article-tags">
					<view class="tag-label">相关标签：</view>
					<view class="tag-list">
						<view class="tag-item" v-for="(tag, index) in article.tags" :key="index">{{ tag }}</view>
					</view>
				</view>
				
				<!-- 文章点赞和收藏 -->
				<view class="article-actions">
					<view class="action-button" @tap="handleLike">
						<text class="iconfont" :class="isLiked ? 'icon-dianzan-active' : 'icon-dianzan'"></text>
						<text class="action-text">{{ article.likes }}</text>
					</view>
					<view class="action-button" @tap="handleFavorite">
						<text class="iconfont" :class="isFavorited ? 'icon-shoucang-active' : 'icon-shoucang'"></text>
						<text class="action-text">收藏</text>
					</view>
					<view class="action-button" @tap="handleComment">
						<text class="iconfont icon-pinglun"></text>
						<text class="action-text">{{ article.comments }}</text>
					</view>
				</view>
				
				<!-- 延伸阅读 -->
				<view class="related-readings">
					<view class="related-title">延伸阅读</view>
					<view class="related-list">
						<view 
							class="related-item" 
							v-for="(item, index) in relatedArticles" 
							:key="index"
							@tap="navigateToDetail(item.id)"
						>
							<image :src="item.image" mode="aspectFill" class="related-image"></image>
							<view class="related-content">
								<text class="related-item-title">{{ item.title }}</text>
								<text class="related-item-info">{{ item.author }} · {{ item.views }}阅读</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 禅意语录 -->
			<view class="quote-container">
				<view class="quote-icon">
					<text class="iconfont icon-rightyinhao"></text>
				</view>
				<text class="quote-text">心若无尘，天地皆禅境</text>
				<text class="quote-author">— 天禅境</text>
			</view>
			
			<!-- 底部空间 -->
			<view class="footer-space"></view>
		</scroll-view>
		
		<!-- 底部工具栏 -->
		<view class="bottom-toolbar">
			<view class="comment-input-box" @tap="showCommentInput">
				<text class="comment-placeholder">写下禅心感悟...</text>
			</view>
			
			<view class="toolbar-actions">
				<view class="toolbar-action" @tap="handleLike">
					<text class="iconfont" :class="isLiked ? 'icon-dianzan-active' : 'icon-dianzan'"></text>
				</view>
				<view class="toolbar-action" @tap="handleFavorite">
					<text class="iconfont" :class="isFavorited ? 'icon-shoucang-active' : 'icon-shoucang'"></text>
				</view>
				<view class="toolbar-action" @tap="handleShare">
					<text class="iconfont icon-fenxiang"></text>
				</view>
			</view>
		</view>
		
		<!-- 评论输入框弹窗 -->
		<view class="modal-mask" v-if="showCommentModal" @tap="hideCommentInput"></view>
		<view class="comment-modal" v-if="showCommentModal">
			<view class="comment-modal-header">
				<text class="comment-modal-title">发表感悟</text>
				<text class="comment-modal-close" @tap="hideCommentInput">取消</text>
			</view>
			<view class="comment-modal-body">
				<textarea 
					class="comment-textarea" 
					placeholder="写下您的禅意感悟..." 
					v-model="commentText"
					auto-focus
					maxlength="500"
				></textarea>
				<view class="comment-length">{{ commentText.length }}/500</view>
			</view>
			<view class="comment-modal-footer">
				<button class="submit-button" :disabled="!commentText.trim()" @tap="submitComment">发布</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id: '',
			article: {
				id: '1001',
				title: '禅修的艺术：寻找内心的宁静之道',
				author: '明海法师',
				authorAvatar: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png',
				date: '2025年5月2日',
				tag: '禅心智慧',
				coverImage: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png',
				coverCaption: '一花一世界，一叶一如来',
				content: `
					<div style="font-size: 30rpx; line-height: 1.8; color: #333;">
						<p style="text-indent: 2em; margin-bottom: 25rpx;">在这个喧嚣的世界里，我们的心灵常常被纷繁的思绪和无尽的欲望所扰乱。禅修，作为一种古老而深邃的修行方式，为我们提供了回归本心、找回宁静的途径。</p>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">禅修不仅仅是一种宗教活动，更是一种生活态度，一种心灵的修养。通过禅修，我们可以学会观照自己的内心，认识自己的本性，从而获得真正的自由和解脱。</p>
						
						<h3 style="font-size: 34rpx; color: #6A4C29; margin: 40rpx 0 20rpx;">何为禅？</h3>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">禅，不立文字，教外别传，直指人心，见性成佛。这十六个字道出了禅的精髓。禅不依赖于经典文字，不拘泥于形式教条，而是直接指向人的心性，启发人们觉悟自己的佛性。</p>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">禅的修行，不在于追求外在的形式，而在于返回内心的觉知。正如六祖慧能所言："菩提本无树，明镜亦非台。本来无一物，何处惹尘埃？"一切烦恼执着，皆源于我们对外界事物的妄想分别。</p>
						
						<div style="background-color: #F8F5EF; padding: 30rpx; border-radius: 15rpx; margin: 30rpx 0;">
							<p style="color: #6A4C29; font-style: italic; text-align: center;">"心若无尘，天地皆禅境；眼若无贪，万物皆美景。"</p>
						</div>
						
						<h3 style="font-size: 34rpx; color: #6A4C29; margin: 40rpx 0 20rpx;">禅修的方法</h3>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">禅修的方法有很多，但核心都是通过调身、调息、调心，达到身心统一的境界。以下是几种常见的禅修方法：</p>
						
						<p style="margin-bottom: 20rpx;"><strong style="color: #6A4C29;">1. 坐禅</strong></p>
						<p style="text-indent: 2em; margin-bottom: 25rpx;">坐禅是最基本也是最常见的禅修方式。通过正确的姿势坐下，保持脊柱挺直，放松全身，将注意力集中于呼吸或某一禅修对象上，逐渐使心平静下来。</p>
						
						<p style="margin-bottom: 20rpx;"><strong style="color: #6A4C29;">2. 行禅</strong></p>
						<p style="text-indent: 2em; margin-bottom: 25rpx;">行禅是在行走中进行的禅修。通过有意识地感受每一步的触感，将心专注于当下的行走过程，不为外境所动，保持内心的清明与觉知。</p>
						
						<p style="margin-bottom: 20rpx;"><strong style="color: #6A4C29;">3. 茶禅</strong></p>
						<p style="text-indent: 2em; margin-bottom: 25rpx;">茶禅是将饮茶与禅修结合的一种方式。通过泡茶、赏茶、闻茶、品茶的过程，体验生活中的禅意，培养专注力和感恩心。</p>
						
						<h3 style="font-size: 34rpx; color: #6A4C29; margin: 40rpx 0 20rpx;">禅修的益处</h3>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">现代科学研究已经证实，禅修对身心健康有着显著的积极影响：</p>
						
						<ul style="margin-bottom: 30rpx; padding-left: 40rpx;">
							<li style="margin-bottom: 15rpx;">减轻压力和焦虑</li>
							<li style="margin-bottom: 15rpx;">提高专注力和记忆力</li>
							<li style="margin-bottom: 15rpx;">增强免疫系统功能</li>
							<li style="margin-bottom: 15rpx;">改善睡眠质量</li>
							<li style="margin-bottom: 15rpx;">增进情绪稳定性和幸福感</li>
						</ul>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">然而，禅修的最终目的不仅仅是为了获得这些世俗的益处，而是为了开发人类内在的智慧和慈悲，认识自己的本性，获得真正的自由和解脱。</p>
						
						<h3 style="font-size: 34rpx; color: #6A4C29; margin: 40rpx 0 20rpx;">在日常生活中修禅</h3>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">禅不仅仅是坐在蒲团上的修行，更应该融入日常生活中的每一个细节。正如赵州禅师所言："吃饭时吃饭，睡觉时睡觉。"这看似平常的话语，实则道出了禅的精髓——活在当下，全然觉知。</p>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">在日常生活中，我们可以将任何活动都变成禅修的机会：洗衣、做饭、打扫、工作……只要我们能够全身心地投入，保持觉知，每一个平凡的行为都能成为通往觉醒的道路。</p>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">禅修的艺术，归根结底，是一种回归本心的艺术，是一种在喧嚣中寻找宁静的艺术，是一种在复杂中回归简单的艺术。通过禅修，我们不是要逃离这个世界，而是要更深入地体验这个世界，以一颗清明的心去感受生命的每一个瞬间。</p>
						
						<div style="background-color: #F8F5EF; padding: 30rpx; border-radius: 15rpx; margin: 30rpx 0;">
							<p style="color: #6A4C29; font-style: italic; text-align: center;">"万法归一，一归何处？"</p>
						</div>
						
						<p style="text-indent: 2em; margin-bottom: 25rpx;">在这个问题的答案中，或许就藏着我们一直在寻找的宁静之道。</p>
					</div>
				`,
				likes: 368,
				comments: 42,
				tags: ['禅修', '心灵成长', '内观', '正念']
			},
			relatedArticles: [
				{
					id: '1002',
					title: '茶道与禅修：一杯茶里的整个宇宙',
					author: '慧远',
					views: '1.5k',
					image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
				},
				{
					id: '1003',
					title: '五月禅境音乐会：聆听心灵的声音',
					author: '天禅境',
					views: '1.2k',
					image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
				},
				{
					id: '1004',
					title: '曼陀罗香炉：传承千年的禅意香道',
					author: '净空',
					views: '857',
					image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
				}
			],
			isLiked: false,
			isFavorited: false,
			showCommentModal: false,
			commentText: ''
		}
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id;
			// 实际应用中，应该根据 ID 从后端获取文章详情
			// this.getArticleDetail(this.id);
		}
	},
	onShareAppMessage() {
		return {
			title: this.article.title,
			path: `/pages/news/detail?id=${this.article.id}`,
			imageUrl: this.article.coverImage
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		
		// 获取文章详情
		getArticleDetail(id) {
			// 实际应用中从 API 获取文章详情
			uni.showLoading({
				title: '加载中...'
			});
			
			// 模拟 API 请求
			setTimeout(() => {
				uni.hideLoading();
				// 设置文章详情数据
			}, 500);
		},
		
		// 导航到其他文章
		navigateToDetail(id) {
			uni.navigateTo({
				url: `/pages/news/detail?id=${id}`
			});
		},
		
		// 处理点赞
		handleLike() {
			this.isLiked = !this.isLiked;
			if (this.isLiked) {
				this.article.likes++;
				uni.showToast({
					title: '感谢赞赏',
					icon: 'none'
				});
			} else {
				this.article.likes--;
			}
		},
		
		// 处理收藏
		handleFavorite() {
			this.isFavorited = !this.isFavorited;
			if (this.isFavorited) {
				uni.showToast({
					title: '已收藏',
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: '已取消收藏',
					icon: 'none'
				});
			}
		},
		
		// 处理评论
		handleComment() {
			this.showCommentModal = true;
		},
		
		// 处理分享
		handleShare() {
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		
		// 显示评论输入框
		showCommentInput() {
			this.showCommentModal = true;
		},
		
		// 隐藏评论输入框
		hideCommentInput() {
			this.showCommentModal = false;
			this.commentText = '';
		},
		
		// 提交评论
		submitComment() {
			if (!this.commentText.trim()) {
				return;
			}
			
			uni.showLoading({
				title: '发布中...'
			});
			
			// 模拟提交评论
			setTimeout(() => {
				uni.hideLoading();
				
				this.article.comments++;
				this.hideCommentInput();
				
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				});
			}, 500);
		}
	}
}
</script>

<style lang="scss">
/* 基础样式继承自主页面 */
@font-face {
	font-family: 'iconfont';
	/* Project id 4874541 */
	src: url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.woff2?t=1743246128509') format('woff2'),
		url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.woff?t=1743246128509') format('woff'),
		url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.ttf?t=1743246128509') format('truetype');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 添加新的图标 */
.icon-fanhui:before {
	content: "\e604";
}

.icon-pinglun:before {
	content: "\e60c";
}

.icon-fenxiang:before {
	content: "\e614";
}

.icon-dianzan:before {
	content: "\e611";
}

.icon-dianzan-active:before {
	content: "\e611";
	color: #C8A675;
}

.icon-shoucang:before {
	content: "\e633";
}

.icon-shoucang-active:before {
	content: "\e613";
	color: #C8A675;
}

page {
	background-color: #F5F2EA; /* 米白色背景 */
	font-family: "思源宋体", serif;
}

.container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
}

.status-bar {
	height: var(--status-bar-height);
	width: 100%;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background-color: #FFF;
	box-shadow: 0 2rpx 10rpx rgba(106, 76, 41, 0.05);
}

.title-text {
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	font-size: 36rpx;
	color: #6A4C29; /* 檀木棕色 */
	flex: 1;
	text-align: center;
}

.header-icons {
	.iconfont {
		color: #6A4C29;
		font-size: 40rpx;
	}
}

/* 文章滚动区域 */
.article-scroll {
	flex: 1;
	overflow: hidden;
}

/* 文章标题区 */
.article-header {
	padding: 30rpx;
	background-color: #FFF;
}

.article-title {
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	font-size: 40rpx;
	color: #333;
	line-height: 1.4;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: block;
}

.article-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.meta-left {
	display: flex;
	align-items: center;
}

.author-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-right: 15rpx;
}

.author-name {
	font-size: 28rpx;
	color: #333;
}

.meta-right {
	font-size: 24rpx;
	color: #999;
}

.article-tag {
	display: inline-block;
	padding: 6rpx 20rpx;
	background-color: rgba(200, 166, 117, 0.2);
	color: #6A4C29;
	font-size: 24rpx;
	border-radius: 6rpx;
}

/* 封面图 */
.cover-image-container {
	margin-bottom: 30rpx;
	position: relative;
}

.cover-image {
	width: 100%;
	display: block;
}

.image-caption {
	padding: 15rpx 30rpx;
	text-align: center;
	font-size: 24rpx;
	color: #999;
	background-color: #FFF;
}

/* 文章正文 */
.article-content {
	padding: 30rpx;
	background-color: #FFF;
	line-height: 1.8;
}

/* 文章底部 */
.article-footer {
	padding: 30rpx;
	background-color: #FFF;
	margin-top: 20rpx;
}

.article-tags {
	margin-bottom: 30rpx;
}

.tag-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 15rpx;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
}

.tag-item {
	margin: 0 15rpx 15rpx 0;
	padding: 6rpx 20rpx;
	background-color: rgba(200, 166, 117, 0.1);
	color: #6A4C29;
	font-size: 24rpx;
	border-radius: 30rpx;
}

/* 文章操作 */
.article-actions {
	display: flex;
	justify-content: space-around;
	padding: 20rpx 0;
	border-top: 1rpx solid rgba(106, 76, 41, 0.1);
	border-bottom: 1rpx solid rgba(106, 76, 41, 0.1);
	margin-bottom: 30rpx;
}

.action-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.iconfont {
		font-size: 36rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.action-text {
		font-size: 24rpx;
		color: #999;
	}
}

/* 延伸阅读 */
.related-readings {
	margin-top: 30rpx;
}

.related-title {
	font-size: 32rpx;
	color: #6A4C29;
	font-weight: bold;
	margin-bottom: 20rpx;
	font-family: "汉仪尚巍手书", "思源宋体", serif;
}

.related-list {
	margin-top: 20rpx;
}

.related-item {
	display: flex;
	margin-bottom: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid rgba(106, 76, 41, 0.1);
	
	&:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
}

.related-image {
	width: 160rpx;
	height: 120rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}

.related-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.related-item-title {
	font-size: 28rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 10rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.related-item-info {
	font-size: 24rpx;
	color: #999;
}

/* 禅意语录 */
.quote-container {
	margin: 40rpx 30rpx;
	padding: 30rpx;
	background-color: #F8F5EF;
	border-radius: 15rpx;
	position: relative;
	box-shadow: 0 4rpx 12rpx rgba(106, 76, 41, 0.05);
}

.quote-icon {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	
	.iconfont {
		font-size: 40rpx;
		color: rgba(200, 166, 117, 0.3);
	}
}

.quote-text {
	text-align: center;
	font-size: 32rpx;
	color: #6A4C29;
	line-height: 1.6;
	margin-bottom: 15rpx;
	display: block;
	font-family: "汉仪尚巍手书", "思源宋体", serif;
}

.quote-author {
	text-align: right;
	font-size: 24rpx;
	color: #999;
	display: block;
}

.footer-space {
	height: 100rpx;
}

/* 底部工具栏 */
.bottom-toolbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15rpx 30rpx;
	background-color: #FFF;
	box-shadow: 0 -2rpx 10rpx rgba(106, 76, 41, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
}

.comment-input-box {
	flex: 1;
	height: 70rpx;
	background-color: #F5F2EA;
	border-radius: 35rpx;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}

.comment-placeholder {
	font-size: 28rpx;
	color: #999;
}

.toolbar-actions {
	display: flex;
	align-items: center;
}

.toolbar-action {
	margin-left: 30rpx;
	
	.iconfont {
		font-size: 40rpx;
		color: #6A4C29;
	}
}

/* 评论弹窗 */
.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

.comment-modal {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFF;
	border-radius: 30rpx 30rpx 0 0;
	z-index: 1000;
	animation: slideUp 0.3s ease;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

.comment-modal-header {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid rgba(106, 76, 41, 0.1);
}

.comment-modal-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
}

.comment-modal-close {
	font-size: 28rpx;
	color: #999;
}

.comment-modal-body {
	padding: 20rpx 30rpx;
}

.comment-textarea {
	width: 100%;
	height: 300rpx;
	font-size: 28rpx;
	line-height: 1.5;
	padding: 20rpx 0;
	border: none;
}

.comment-length {
	text-align: right;
	font-size: 24rpx;
	color: #999;
	padding: 10rpx 0;
}

.comment-modal-footer {
	padding: 20rpx 30rpx 40rpx;
}

.submit-button {
	background: linear-gradient(135deg, #C8A675 0%, #6A4C29 100%);
	color: #FFF;
	font-size: 32rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	border: none;
}

.submit-button[disabled] {
	opacity: 0.6;
	background: #CCC;
}
</style>